<template>
  <!--面试-->
  <view :style="{ width: windowWidth + 'px' }" class="mianshi">
    <baseHead title="面试记录" bg="#ffffff" color="#000000">
      <template slot="textnr">
        <view style="background-color: #ffffff; position: fixed; z-index: 999">
          <u-tabs
            :list="list1"
            @click="clickTabs"
            :current="typeNumber"
            :itemStyle="{ height: '44px' }"
          >
          </u-tabs>
        </view>
      </template>
    </baseHead>
    <view style="height: 44px"></view>

    <scroll-view
      scroll-y
      :style="{ height: windowHeight - 50 - statusBarH + 'px' }"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      refresher-default-style="none"
      :refresher-threshold="10"
      :show-scrollbar="false"
      @scrolltolower="ReachBottom"
      :lower-threshold="50"
      v-if="datalist.length > 0"
    >
      <u-loading-icon
        :show="triggered"
        text="正在刷新"
        style="padding-top: 10rpx"
      ></u-loading-icon>
      <view class="interview-item" v-for="(item, key) in datalist" :key="key">
        <view class="item-top">
          <view class="date">
            {{
              item.InterviewTime.split(" ")[0].split("-")[0] +
              "年" +
              item.InterviewTime.split(" ")[0].split("-")[1] +
              "月" +
              item.InterviewTime.split(" ")[0].split("-")[2] +
              "日"
            }}
          </view>
          <view class="time">{{
            item.InterviewTime.split(" ")[1].slice(0, 5)
          }}</view>
          <view class="top-image">
            <image
              v-if="item.InterviewType == 2"
              class="top-image1"
              src="/static/image/my/shipinIcon.png"
              mode=""
            ></image>
            <image
              v-else-if="item.InterviewType == 1"
              class="top-image1"
              src="/static/image/my/yuyin.png"
              mode=""
            ></image>
          </view>
        </view>
        <view class="item-bottom">
          <view class="bottom-top">
            <view class="">
              <image class="top-img" :src="URL + item.LogoPath"></image>
            </view>
            <view class="top-text">
              <view class="top-right">
                <view class="top-right-top">
                  <view class="top-right-top-Job">
                    <text>{{ item.CorpName }}</text>
                  </view>
                  <view class="top-right-top-zhuangtai">
                    {{ item.InterviewStateStr }}
                  </view>
                </view>
                <view class="top-right-bottom">
                  {{ item.JobName + "·" + item.Wage }}
                </view>
              </view>
              <view class=""> </view>
            </view>
          </view>
          <view
            class="bottom-bottom"
            v-if="item.InterviewState != 4 && item.InterviewState != 5"
          >
            <view class="bottom-bottom-left">
              <image
                class="bottom-bottom-left-img"
                :src="URL + item.CreatedByHeadIcon"
                mode=""
              >
              </image>
              <view class="bottom-bottom-left-name">
                {{ item.LinkManName }}
              </view>
              <view class="bottom-bottom-left-btn" @click="fnPhone(item)">
                <image
                  class="bottom-bottom-left-btn-img"
                  src="/static/icon/dianhua.png"
                  mode=""
                >
                </image>
                <text>呼叫</text>
              </view>
            </view>
            <view class="bottom-bottom-right">
              <template v-if="item.InterviewState == 0">
                <template v-if="item.InterviewState == 0 && clickty(item)">
                  <view class="right-jujue" @click="jujue(item)"> 拒绝 </view>
                  <view class="right-tongyi" @click="tongyi(item)"> 同意 </view>
                </template>
                <view class="right-text" v-else>已过面试时间</view>
              </template>
              <template
                v-if="item.InterviewState == '1' || item.InterviewState == '2'"
              >
                <view class="right-jujue"> 取消面试 </view>
                <template>
                  <view
                    class="right-tongyi"
                    v-if="item.InterviewType == 2 || item.InterviewType == 1"
                    @click="videoRoom(item)"
                  >
                    进入面试
                  </view>
                  <view class="right-tongyi" v-else @click="qudiao(item)">
                    面试签到
                  </view>
                </template>
              </template>

              <view class="right-jujue1" v-if="item.InterviewState == 3">
                <u-button
                  text="询问结果"
                  shape="circle"
                  :disabled="item.InterviewResults"
                  @click="fasongyaoqing(item)"
                ></u-button>
              </view>
              <view class="radioCla" v-if="item.InterviewState == 6">
                <view class="right-jujue" @click="weimianshi(item)">
                  未面试
                </view>
                <view class="right-tongyi" @click="yimianshi(item)">
                  已面试
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <u-empty
      v-else
      mode="data"
      icon="/static/recruit/index/qsy.png"
      :width="windowWidth"
      marginTop="150"
    >
    </u-empty>

    <u-action-sheet
      :actions="listaction"
      :title="titledtext"
      :show="actionsheetshow"
      cancelText="取消"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      @select="selectClick"
      openType="contact"
      @close="actionsheetshow = false"
    ></u-action-sheet>
  </view>
</template>

<script>
import baseHead from "@/pages/component/baseHead.vue";

export default {
  data() {
    return {
      show: false,
      titledtext: "拨打电话",
      listaction: [],
      actionsheetshow: false,

      URL: this.$config.domain.staticUrl,
      dial: "",
      showActionSheet: false,
      datalist: [],
      status: "loadmore",
      PageIndex: 1,
      PageSize: 10,
      // InterviewState  面试状态 0.待接受 1.待面试 2.即将面试 3.已面试 4.已取消 5.已拒绝 6.待记录
      list1: [
        {
          id: "",
          name: "全部",
        },
        {
          id: 0,
          name: "待接受",
        },
        {
          id: 1,
          name: "待面试",
        },
        {
          id: 2,
          name: "即将面试",
        },
        {
          id: 3,
          name: "已面试",
        },
        {
          id: 4,
          name: "已取消",
        },
        {
          id: 5,
          name: "已拒绝",
        },
        {
          id: 6,
          name: "待记录",
        },
      ],
      typeNumber: 2,
      obj: {
        InterviewState: "",
        PageIndex: 1,
        PageSize: 10,
      },
      statusBarH: "",
      windowHeight: "",
      windowWidth: "",
      triggered: false,
    };
  },
  components: {
    baseHead,
  },
  onReachBottom() {
    // 加载前值为loadmore，加载中为loading，没有数据为nomore
    if (this.status != "nomore") {
      this.status = "loading";
      this.listdata();
    }
  },
  created() {
    this.listdata();
    const app = getApp();
    this.statusBarH = app.globalData.statusBarH; //状态栏高度
    this.windowHeight = app.globalData.phoneInformation.windowHeight; //屏幕高度
    this.windowWidth = app.globalData.phoneInformation.windowWidth;
  },
  onShow() {
    this.obj = {
      ...this.obj,
      InterviewState: "1",
    };
  },
  mounted() {
    let that = this;
    // const query = uni.createSelectorQuery().in(this);
    // query.select('#tabsHeight').boundingClientRect(data => {
    // 	console.log("得到布局位置信息" + JSON.stringify(data));
    // 	console.log("节点离页面顶部的距离为" + data.top);
    // 	that.hegithd = data.top
    // }).exec();
  },
  methods: {
    ReachBottom() {
      // 加载前值为loadmore，加载中为loading，没有数据为nomore
      if (this.status != "nomore") {
        this.status = "loading";
        this.listdata();
      }
    },
    // 下拉刷新
    onRefresh() {
      this.triggered = true;
      setTimeout(() => {
        this.triggered = false;
        let obj = {
          PageIndex: 1,
          PageSize: 10,
          State: this.State,
        };
        this.datalist = [];
        this.listdata();
      }, 2000);
    },
    // 下拉复位
    onRestore() {
      this.triggered = false; // 需要重置
      console.log("onRestore");
    },
    radioChange(n) {
      this.show = true;
    },
    weimianshi(item) {
      this.$http.huirc
        .interviewupState({
          InterviewState: 4,
          Id: item.Id,
        })
        .then((res) => {
          if (res.Success) {
            this.$util.toast("操作成功!");
            this.listdata1();
          }
        });
    },

    yimianshi(item) {
      this.$http.huirc
        .interviewupState({
          InterviewState: 3,
          Id: item.Id,
        })
        .then((res) => {
          if (res.Success) {
            this.$util.toast("操作成功!");
            this.listdata1();
          }
        });
    },

    timestatus(item) {
      const date = new Date().getTime();
      const time = new Date(item).getTime();
      let tag = Math.abs(time - date) > 30 * 60 * 1000 ? false : true;
      return tag;
    },
    clickty(item) {
      let newDate = new Date();
      //获取到的时间
      const nowTime = item.InterviewTime;
      const thisTime = new Date(nowTime.replace(/-/g, "/")).getTime();
      if (newDate > thisTime) {
        return false;
      } else {
        return true;
      }
    },
    clickTabs(item) {
      if (this.obj.InterviewState === item.id) return;
      this.obj = {
        ...this.obj,
        InterviewState: item.id,
      };
      this.typeNumber = item.index;
      this.obj.PageIndex = 1;
      this.datalist = [];
      this.status = "loadmore";
      this.listdata();
    },
    listdata() {
      this.$http.huirc.interviewlistByUser(this.obj).then((res) => {
        if (res.Result) {
          if (res.Result.Items.length == 0) {
            // 没有数据----
            this.status = "nomore";
            return;
          }
          this.datalist = this.datalist.concat(res.Result.Items);
          this.datalist = this.datalist.map((item) => {
            return {
              ...item,
              disabled: false,
            };
          });
          if (res.Result.Items.length >= this.obj.PageSize) {
            this.obj.PageIndex++;
            // 表示还有数据
          } else {
            //没有更多数据了
            this.status = "nomore";
          }
        }
      });
    },
    listdata1() {
      this.$http.huirc.interviewlistByUser(this.obj).then((res) => {
        if (res.Result) {
          this.datalist = res.Result.Items;
        }
      });
    },

    quxiao(item) {
      this.$http.huirc
        .interviewupState({
          Id: item.Id,
          InterviewState: "4",
        })
        .then((res) => {
          if (res.Success) {
            this.$util.toast("取消成功");
            this.obj.PageIndex = 1;
            this.datalist = [];
            this.status = "loadmore";
            this.listdata();
          }
        });
    },

    qudiao(item) {
      this.$http.huirc
        .interviewupState({
          Id: item.Id,
          InterviewState: "3",
        })
        .then((res) => {
          if (res.Success) {
            this.$util.toast("签到成功");
            this.obj.PageIndex = 1;
            this.datalist = [];
            this.status = "loadmore";
            this.listdata();
          }
        });
    },
    //语音面试
    audioRoom(item) {},
    //视频面试
    videoRoom(item) {
      uni.navigateTo({
        url: `/pages/views/packageF/videoCall/index?interviewId=${item.Id}`,
      });
    },
    // 拒绝面试
    jujue(item) {
      this.$http.huirc
        .interviewupState({
          Id: item.Id,
          InterviewState: "5",
        })
        .then((res) => {
          if (res.Success) {
            this.$util.toast("已拒绝面试");
            this.obj.PageIndex = 1;
            this.datalist = [];
            this.status = "loadmore";
            this.listdata();
          }
        });
    },
    // 同意面试
    tongyi(item) {
      this.$http.huirc
        .interviewupState({
          Id: item.Id,
          InterviewState: "1",
        })
        .then((res) => {
          if (res.Success) {
            this.$util.toast("已同意邀请面试");
            this.obj.PageIndex = 1;
            this.datalist = [];
            this.status = "loadmore";
            this.listdata();
          }
        });
    },
    jieshoudel(item) {
      this.$http.huirc
        .interviewdel({
          Id: item.Id,
        })
        .then((res) => {
          if (res.Success) {
            this.$util.toast(res.Message);
            this.obj.PageIndex = 1;
            this.datalist = [];
            this.status = "loadmore";
            this.listdata();
          }
        });
    },
    // 已参加
    yicanjia(item) {
      this.$http.huirc
        .interviewupState({
          Id: item.Id,
          InterviewState: "3",
        })
        .then((res) => {
          if (res.Success) {
            // this.$util.toast("已同意邀请面试");
            this.obj.PageIndex = 1;
            this.datalist = [];
            this.status = "loadmore";
            this.listdata();
          }
        });
    },

    //导航
    qianwangshuichang(item) {
      uni.openLocation({
        latitude: Number(item.Latitude),
        longitude: Number(item.Longitude),
        scale: 10,
        name: item.CorpName,
        success: function () {},
        fail: function (e) {},
      });
    },

    // 未参加
    weicanjia(item) {
      this.$http.huirc
        .interviewupState({
          Id: item.Id,
          InterviewState: "4",
        })
        .then((res) => {
          if (res.Success) {
            this.obj.PageIndex = 1;
            this.datalist = [];
            this.status = "loadmore";
            this.listdata();
          }
        });
    },
    selectClick(item) {
      let ph = item.name;
      uni.makePhoneCall({
        phoneNumber: ph, //仅为示例
      });
    },
    fnPhone(item) {
      if (item.LinkManPhone) {
        this.actionsheetshow = true;
        this.listaction = [
          {
            name: item.LinkManPhone,
          },
        ];
        this.actionsheetshow = true;
      }
    },
    //发送 咨询面试邀请结果
    fasongyaoqing(item) {
      this.$http.huirc.interviewdetailsById(item.Id).then((res) => {
        if (res.Success) {
          const app = getApp();
          this.$http.huirc
            .jobUserRecordup({
              UserId: app.globalData.user.UserId,
              InterviewResults: 1,
              JobId: res.Result.JobId,
            })
            .then((res1) => {
              if (res1.Success) {
                let payload = {
                  data: "job-interview-result",
                  description: "咨询面试邀请结果",
                  extension: JSON.stringify({
                    Id: res.Result.Id, //面试邀请ID
                    JobId: res.Result.JobId, //职位ID
                    JobName: res.Result.JobName, //职位名称
                    UserId: res.Result.UserId, //求职者ID
                    ResumeId: res.Result.ResumeId, //简历ID
                    InterviewTime: res.Result.InterviewTime, //面试时间
                    JobUserId: res.Result.JobUserId, //职位发布者ID
                    Notes: "", //面试通知内容
                    HasEmploy: 0,
                  }),
                };
                // 点击查询结果按钮后禁用该按钮
                // item.disabled = true;
                // let conversationID = 'C2C' + item.CorpId + "_" + item.PublisherId;
                // CorpId 企业ID  JobUserId职位发布者ID C2C{CorpId}_{JobUserId}
                const message = uni.$TUIKit.createCustomMessage({
                  to: `${res.Result.CorpId}_${res.Result.JobUserId}`,
                  conversationType: "C2C",
                  payload: payload,
                });
                console.log(message);
                uni.$TUIKit
                  .sendMessage(message)
                  .then((res) => {
                    console.log(res);
                  })
                  .catch((error) => {
                    console.log(error);
                  });
              }
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mianshi {
  box-sizing: border-box;
}

.dsgsag {
  height: var(--status-bar-height);
}

.interview-item {
  padding: 20rpx 30rpx;
  box-sizing: border-box;

  .item-top {
    display: flex;
    font-size: 24rpx;

    .time {
      margin-left: 20rpx;
    }

    .top-image {
      margin-left: 20rpx;

      .top-image1 {
        width: 24rpx;
        height: 18rpx;
      }
    }
  }

  .item-bottom {
    background-color: #ffffff;
    margin-top: 10rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .bottom-top {
      display: flex;

      .top-img {
        width: 98rpx;
        height: 98rpx;
        border-radius: 10rpx;
      }

      .top-text {
        width: 100%;
        box-sizing: border-box;

        .top-right {
          .top-right-top {
            display: flex;
            justify-content: space-between;

            .top-right-top-Job {
              font-size: 32rpx;
              font-weight: bold;
              color: #000000;
              margin-left: 20rpx;
            }

            .top-right-top-zhuangtai {
              font-size: 26rpx;
              font-weight: 400;
              color: #666666;
            }
          }

          .top-right-bottom {
            font-size: 26rpx;
            font-weight: 400;
            color: #666666;
            margin-top: 13rpx;
            margin-left: 20rpx;
          }
        }
      }
    }

    .bottom-bottom {
      display: flex;
      justify-content: space-between;

      .bottom-bottom-left {
        display: flex;
        align-items: center;
        margin-top: 45rpx;

        .bottom-bottom-left-img {
          width: 36rpx;
          height: 36rpx;
          margin-right: 10rpx;
          border-radius: 50rpx;
        }

        .bottom-bottom-left-name {
          margin-right: 10rpx;
        }

        .bottom-bottom-left-btn {
          padding: 10rpx;
          border: 1rpx solid #3476fe;
          background: #ffffff;
          color: #3476fe;
          border-radius: 10rpx;
          font-size: 20rpx;
          display: flex;
          align-items: center;

          .bottom-bottom-left-btn-img {
            width: 18rpx;
            height: 20rpx;
            margin-right: 10rpx;
          }
        }
      }

      .bottom-bottom-right {
        display: flex;
        margin-top: 34rpx;

        .right-jujue {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          font-weight: 400;
          color: #000000;
          width: 164rpx;
          height: 64rpx;
          background: #ffffff;
          border-radius: 36rpx;
          opacity: 1;
          border: 1rpx solid rgba(0, 0, 0, 0.2);
          margin-left: 20rpx;
        }

        .right-jujue1 {
          /deep/.u-button {
            height: 64rpx;
          }
        }

        .right-tongyi {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          font-weight: 400;
          color: #3476fe;
          width: 164rpx;
          height: 64rpx;
          background: #ffffff;
          border-radius: 36rpx;
          opacity: 1;
          border: 1rpx solid #3476fe;
          margin-left: 20rpx;
        }

        .right-text {
          font-size: 26rpx;
          font-weight: 400;
          color: #666666;
          display: flex;
          align-items: center;
        }

        .radioCla {
          height: 64rpx;
          display: flex;
          align-items: center;

          .right-jujue {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            font-weight: 400;
            color: #000000;
            width: 164rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 36rpx;
            opacity: 1;
            border: 1rpx solid rgba(0, 0, 0, 0.2);
            margin-left: 20rpx;
          }

          .right-tongyi {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            font-weight: 400;
            color: #3476fe;
            width: 164rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 36rpx;
            opacity: 1;
            border: 1rpx solid #3476fe;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
}

// .popupCla {
// 	.popupConCla {
// 		width: 560rpx;
// 		height: 713rpx;
// 		padding: 44rpx 0 0 0;

// 		.popupConCla1 {
// 			display: flex;
// 			align-items: center;
// 			margin: 0 30rpx;

// 			image {
// 				width: 76rpx;
// 				height: 76rpx;
// 				border: 1rpx solid rgba(112, 112, 112, 0.2);
// 				border-radius: 10rpx;
// 			}

// 			.popupConCla1Text {
// 				margin-left: 20rpx;
// 				font-size: 32rpx;
// 				font-weight: bold;
// 				color: #000000;
// 			}
// 		}

// 		.popupConCla2 {
// 			font-size: 26rpx;
// 			font-weight: 400;
// 			color: #333333;
// 			margin: 34rpx 30rpx 0 30rpx;

// 			.popupConCla1Text1 {
// 				margin-bottom: 14rpx;
// 			}
// 		}

// 		.popupConCla3 {
// 			margin-top: 53rpx;
// 			margin-bottom: 79rpx;
// 			margin: 53rpx 30rpx 79rpx 30rpx;

// 			.popupConCla3Text1 {
// 				border-left: 4rpx solid #1684FC;
// 				padding-left: 6rpx;
// 				font-size: 30rpx;
// 				font-weight: bold;
// 				color: #000000;
// 			}

// 			.popupConCla3Text2 {
// 				margin: 20rpx 10rpx 0 0;
// 				display: flex;
// 				align-items: center;
// 				justify-content: space-between;
// 				font-size: 30rpx;
// 				font-weight: 400;
// 				color: #000000;
// 			}
// 		}

// 		.popupConCla4 {
// 			display: flex;
// 			height: 131rpx;
// 			border-top: 1rpx solid #E7E7E8;

// 			.popupConCla4Quxiao {
// 				display: flex;
// 				justify-content: space-around;
// 				align-items: center;
// 				width: 50%;
// 				height: 100%;
// 				border-right: 1rpx solid #E7E7E8;
// 				font-size: 28rpx;
// 				font-weight: 400;
// 				color: #000000;
// 			}

// 			.popupConCla4Jinru {
// 				display: flex;
// 				justify-content: space-around;
// 				align-items: center;
// 				height: 100%;
// 				width: 50%;
// 				font-size: 28rpx;
// 				font-weight: 400;
// 				color: #3476FE;

// 			}
// 		}
// 	}
// }

// .interview-item {
//   padding: 20rpx 30rpx;

//   background-color: #fff;
//   margin: 20rpx;
//   border-radius: 10rpx;

//   .date,
//   .time {
//     font-size: 30rpx;
//     font-family: PingFang SC;
//     font-weight: bold;
//     color: #000000;
//   }

//   .date {
//     margin-right: 20rpx;
//   }

//   .company-info {
//     padding: 40rpx 0 60rpx;

//     .image3 {
//       width: 110rpx;
//       height: 110rpx;
//       background: #ffd3db;
//       border-radius: 10rpx;
//       flex-shrink: 0;
//       margin-right: 30rpx;
//     }

//     .wages {
//       font-size: 30rpx;
//       font-family: PingFang SC;
//       font-weight: bold;
//       color: #000000;
//     }

//     .address {
//       flex: 1;
//       font-size: 26rpx;
//       font-family: PingFang SC;
//       font-weight: 500;
//       color: #999999;
//       margin-top: 14rpx;
//     }
//   }

//   .bottom-but {
//     width: 100%;
//     display: flex;
//     justify-content: flex-start;
//     align-items: center;

//     .image4 {
//       width: 68rpx;
//       height: 68rpx;
//     }

//     .but {
//       padding: 0rpx 40rpx;
//       height: 68rpx;
//       border-radius: 10rpx;
//       font-size: 26rpx;
//       display: flex;
//       align-items: center;
//       justify-content: center;
//       margin-right: 20rpx;
//     }

//     .but1 {
//       background: #ffffff;
//       border: 1px solid #cdcbcb;
//       color: #666666;
//     }

//     .but2 {
//       background: #1684fc;
//       color: #ffffff;
//     }

//     .butGary {
//       // background: #999999;
//       border: 1px solid red;
//       color: red;
//     }

//     .btndel {
//       color: #666666;
//     }
//   }
// }
</style>